import React, { Component } from 'react';
import { connect } from 'react-redux';
import { nanoid } from 'nanoid';
import Persons from '../../components/Person';
import { addPerson } from '../../redux/Person';

class Person extends Component {

  addPerson = () => {
    const p = {
      id: nanoid(),
      name: this.nameInput.value,
      age: this.ageInput.value
    }
    this.props.addPerson(p)
  }

  render() { 
    console.log(33,this.props.person);
    return (
      <div>
        <h2>上面组件的求和为: { this.props.count }</h2>
        <h2>当前的人们:</h2>
        <input type="text" placeholder='请输入姓名' ref={ dom => this.nameInput = dom}/>&nbsp;
        <input type="number" placeholder='请输入年龄' ref={ dom => this.ageInput = dom}/>&nbsp;
        <button onClick={ this.addPerson }>添加</button>
        <Persons list={ this.props.person }/>
      </div>
    );
  }
}
 
export default connect(
  state => ({
    person: state.person,
    count: state.count
  }),
  { addPerson }
)(Person);